<html xmlns="http://www.w3.org/1999/xhtml">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>左右选的选项卡</title>
	<style>
		*{
			margin: 0;
		  	padding: 0;
		}
		li{
			float: left;
			list-style: none;
			cursor: pointer;
		}
		.liBtn{
			width:50px;
 			height:40px;
 			font-size:20px;
 			font-weight:bold;
 			color:#FF0000;
 			text-align:center;
 			padding-top:10px;
 			background-color:#CCCCCC;
		}
		#conLi li{
			width:150px;
			height: 40px;
			font-size:20px;
 			font-weight:bold;
 			text-align:center;
		}
		#conLi{
			width: 800px;
			overflow: hidden;
		}
	</style>
	<body>
		<ul>
			<li id="conLi">
				<div style="width:1500px">
					<ul>
						<li><a href="#">主页</a></li>
						<li><a href="#">公司简介</a></li>
						<li><a href="#">产品展示</a></li>
     					<li><a href="#">新闻咨询</a></li>
     					<li><a href="#">热点咨询</a></li>
     					<li><a href="#">合作伙伴</a></li>
    					<li><a href="#">网站论坛</a></li>
     					<li><a href="#">在线咨询</a></li>
     					<li><a href="#">联系我们</a></li>
					</ul>
				</div>
			</li>
			<li id="left" class="liBtn" onclick="moveLeft();"><<</li>
  			<li id="right" class="liBtn" onclick="moveRight();">>></li>
		</ul>
	</body>
</html>
<script>
	var conLi = document.getElementById("conLi");
	function moveRight(){
		if (conLi.scrollLeft <= (1500-800)) {
			// alert(conLi.scrollLeft);
			conLi.scrollLeft+=100;
		}
	}
	function moveLeft(){
		if (conLi.scrollLeft >= 0) {
			conLi.scrollLeft-=100;
		}
	}
</script>